<template>
	<view class="content">
		<up-button type="primary" text="确定"></up-button>
		<button class="aaa" open-type="getPhoneNumber" @getphonenumber="getphonenumber" style="border: none; background: none;">
			获取手机号
		</button>
		<view v-if="state.face" class="user-info">
			<image :src="state.face" />
			<form @submit="onSubmit">
			  <input type="nickname" name="nickname" placeholder="请输入昵称"/>
			  <button type="primary" plain form-type="submit">确认修改</button>
			</form>
		</view>
		
		<button open-type="chooseAvatar" @chooseavatar="onChooseavatar">
			获取头像
		</button>
		
		<view @click="toAuth">认证</view>
		<view @click="toPay">借阅</view>
		<ocr-navigator @onSuccess="success" certificateType="idCard" opposite="{{false}}">
		  <button type="primary">身份证正面识别</button>
		</ocr-navigator>
		<ocr-navigator @onSuccess="success" certificateType="idCard" opposite="{{true}}">
		  <button type="primary">身份证反面识别</button>
		</ocr-navigator>
		<up-picker :show="state.show" :columns="state.columns" :defaultIndex="state.defaultIndex" keyName="name" @change="changeHandler" @confirm="changeArea"></up-picker>
		<up-button @click="state.show = true">打开</up-button>
	</view>
</template>

<script setup>
	import { reactive } from "vue";
	import { useredit, category, booklist, bookdetailed, userauth, pay, borrowbook, borrowlist, area } from "@/api/login.js"
	import { getPhone } from "@/api/public.js"
	import { wxLogin } from "@/utils/wxlogin.js"
	const state = reactive({
		username: '',
		face: "",
		show: false,
		columns: [],
		defaultIndex: [0, 0, 0]
	})
	area({type: 'province', code: 0}).then(res => {
		console.log(111, res.content)
		state.columns[0] = res.content
		area({type: 'city', code: res.content[0].code}).then(res => {
			state.columns[1] = res.content
			area({type: 'area', code: res.content[0].code}).then(res => {
				state.columns[2] = res.content
			})
		})
	})
	
	const changeArea = (e) => {
		console.log(e)
	}
	
	const changeHandler = (e) => {
		console.log('e', e)
		const columnIndex = e.columnIndex
		const code = e.value[columnIndex].code
		if(columnIndex === 0) {
			
			area({type: 'city', code}).then(res => {
				state.columns[1] = res.content
				area({type: 'area', code: res.content[0].code}).then(res => {
					state.columns[2] = res.content
					state.defaultIndex = [e.index, 0, 0]
				})
			})
		}
		if(columnIndex === 1) {
			area({type: 'area', code}).then(res => {
				state.columns[2] = res.content
				state.defaultIndex = [e.indexs[0], e.index, 0]
			})
		}
	}
	
	const success = (data) => {
		console.log(1111)
		console.log(data)
	}
	const toPay = () => {
		borrowbook({book_id:19})
	}
	const toAuth = () => {
		userauth({
			'card_front':  "23123",
			'card_reverse': "23123",
			'card_id': "441522987654654",
			'user_name': "杨海民",
			'gender': 1,
			'phone': '13713746864',
			'email': '409019683@qq.com',
			'birth_date': '2024-10-10',
			'province': '102154',
			'city': '102154',
			'area': '102154',
			'address': '南山区'
		})
	}
	bookdetailed({
		id: 19
	})
	borrowlist({
		pageIndex: 1,
		pageSize: 10
	})
	category()
	booklist({category:58})
	const getphonenumber = (e) => {
		console.log('e', e)
		const detail = e.detail
		if(detail.errMsg === 'getPhoneNumber:ok') {
			getPhone({ code: detail.code})
		}
	}
	const onChooseavatar = (e) => {
		console.log('e', e)
		const detail = e.detail
		uni.uploadFile({
			url: `http://book.web-jshtml.cn/view/upload`,
			filePath: e.detail.avatarUrl,
			name: 'files',
			header: {
				'content-type': 'application/x-www-form-urlencoded',
			},
			success: (res) => {
				if(res.statusCode === 200) {
					const data = JSON.parse(res.data)
					state.face = data.content.files_path
				}
			}
		});
	}
	
	const onSubmit = (e) => {
		state.username = e.detail.value.nickname
		console.log(e, state)
		useredit({
			username: state.username,
			face: state.face
		})
		
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.aaa {
		&::after {
			border: none;
		}
	}
</style>
